<template>
	<view class="app-container" :style="[contentStyle]">
		<loading-animation v-if="showLoading" />
		<slot>
		</slot>
	</view>
</template>

<script>
	import LoadingAnimation from '@/components/LoadingAnimation.vue';
	import SkylineNavigation from '@/components/SkylineNavigation.vue';
	import CentralHub from '@/components/CentralHub.vue';
	import RefinedTabBar from '@/components/RefinedTabBar.vue';
	/**
	 * SkylineNavigation - 导航栏
	 * CentralHub - 中间区域内容
	 * RefinedTabBar - tabBar 切换
	 */
	export default {

		props: {
			echelon: {
				type: Object
			},
			loadtime: String,
			isloading: Boolean, // 控制加载状态
		},
		provide() {
			return {
				contentStyle: () => this.contentStyle
			}
		},
		components: {
			LoadingAnimation,
			SkylineNavigation,
			CentralHub,
			RefinedTabBar
		},
		data() {
			// 初始化时获取设备信息
			const systemInfo = uni.getSystemInfoSync();
			return {
				showLoading: true,
				navValue: 0,
				tabValue: 0,
				systemInfo,
			};
		},
		computed: {
			/**
			 * 返回经过默认值处理后的 sky 对象
			 * @returns {Object} 处理后的 echelon 对象
			 * @property {boolean} TransparentNavEnhancer - 导航栏的背景透明化并在Echelon页面取消监听导航栏高度 公共属性
			 */
			solut() {
				return {
					...this.echelon
				}
			},

			/**
			 * @returns {Object} 样式对象 StyleObject 
			 * @property {string} --skyline-navigation-background - 导航栏背景色
			 * @property {string} --navigation-top - 导航栏顶部位置
			 * @property {string} --central-hub-h - 中心区域高度
			 * @property {string} --central-hub-background - 中心区域背景色
			 * @property {string} --my-nav-h - 我的导航栏高度
			 * @property {string} --my-nav-safe-area - 我的导航栏安全区域
			 * @property {string} --w-w - 窗口宽度
			 * @property {string} --my-nav-w-safe-area - 带有安全区域的我的导航栏宽度
			 * @property {string} --my-nav-r-safe-area - 微信的胶囊按键
			 * @property {string} --my-tab-h - 我的选项卡高度
			 * @property {string} --my-tab-safe-area - 我的选项卡安全区域
			 * @property {string} --date-zIndex - 当前时间戳
			 * @property {string} --refined-tab-bar-background - 精简版选项卡背景色
			 */
			contentStyle() {
				// 获取系统信息
				/**
				 * @typedef {Object} SystemInfo
				 * @property {number} statusBarHeight - 状态栏高度
				 * @property {Object} safeAreaInsets - 安全区域
				 * @property {number} windowHeight - 窗口高度
				 * @property {number} windowWidth - 窗口宽度
				 */
				const {
					statusBarHeight,
					safeAreaInsets,
					windowHeight,
					windowWidth
				} = this.systemInfo;

				// 获取菜单按钮信息（如果支持）
				/**
				 * @typedef {Object} MenuButtonInfo
				 * @property {number} width - 按钮宽度
				 * @property {number} height - 按钮高度
				 * @property {number} top - 按钮顶部位置
				 * @property {number} right - 按钮右侧位置
				 * @property {number} bottom - 按钮底部位置
				 * @property {number} left - 按钮左侧位置
				 */
				// #ifndef MP
				const menuButtonInfo = {
					width: 0,
					height: 0,
					top: 0,
					right: 0,
					bottom: 0,
					left: 0,
				};
				// #endif
				// #ifdef MP
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// #endif


				// 计算导航栏安全区域
				/**
				 * @typedef {number} NavSafeArea
				 */
				const navSafeArea = parseInt((menuButtonInfo.height || safeAreaInsets.top) / 3) || 10;

				// 获取解决方案中的 TransparentNavEnhancer
				/**
				 * @typedef {boolean} TransparentNavEnhancer
				 */
				const {
					TransparentNavEnhancer
				} = this.solut;
				// 返回样式对象 
				return {
					'--skyline-navigation-background': `${TransparentNavEnhancer ? 'transparent' : '#1777ff'}`,
					'--navigation-top': `${statusBarHeight}px`,
					'--central-hub-h': `${windowHeight - (this.navValue + this.tabValue )}px`,
					'--central-hub-background': '#f1f1f1',
					'--my-nav-h': `${this.navValue || navSafeArea }px`,
					'--my-nav-safe-area': `${(navSafeArea)}px`,
					'--w-w': `${windowWidth}px`,
					'--my-nav-w-safe-area': `${(windowWidth - menuButtonInfo.width - navSafeArea * 2)}px`,
					'--my-nav-r-safe-area': `${menuButtonInfo.width + navSafeArea * 2}px`,
					'--my-tab-h': `${this.tabValue}px`,
					'--my-tab-safe-area': `${safeAreaInsets.bottom}px`,
					'--date-z-index': `999`,
					'--refined-tab-bar-background': '#d3d3d3'
				};
			},

		},
		created() {
			if (!this.solut.TransparentNavEnhancer) { 
				this.$eventBus.on(['SkylineNavigation', 'RefinedTabBar'], (eventName, val) => {
					if (eventName === 'SkylineNavigation') {
						this.navValue = val;
					} else if (eventName === 'RefinedTabBar') {
						this.tabValue = val;
					}
				});
			}
		},
		mounted() {
			/* uni.onWindowResize(obj => {
				this.systemInfo.windowHeight = obj.size.windowHeight;
				this.systemInfo.windowWidth = obj.size.windowWidth;
			}); */

			this.hideLoading(this.loadtime, this.isloading);
		},
		watch: {
			isloading(flag) {
				this.showLoading = flag;
			}
		},
		methods: {
			async hideLoading(time, isloading) {
				if (isloading) {
					return;
				}
				// 假设这里是异步数据请求
				await new Promise((resolve) => setTimeout(resolve, time || 1000));
				this.showLoading = false;
			},
		},
		beforeDestroy() {
			// 清理事件监听
			this.$eventBus.clear(['SkylineNavigation', 'RefinedTabBar']);
		},
	};
</script>

<style scoped>
	.app-container {
		height: 100vh;
		background-color: var(--central-hub-background);
	}
</style>